<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"><!--html的设置字符编码-->
<!--    Compatible兼容的 edge最新浏览器渲染引擎-->
<!--设置浏览器的兼容模式版本-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--    声明当前网页在移动端浏览器中展示的相关设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<!--    viewport视口作用 在移动浏览器中当页面宽度超出设备，浏览器内部虚拟的一个页面容器缩放，将页面容器缩放到设备这么大然后展示-->
<!--    window.devicePixeIPatio屏幕像素画-->
<!--    目前大多数手机浏览器的视口(承载页面的容器)宽度都是980 initial初始化 scale缩放 1.0不缩放 user-scalable=no 可以no=0 不缩放1 缩放-->
<!--    width 视口的宽度-->
<!--    initial-scale=1.0 初始化缩放-->
<!--    user-scalable=no是否允许用户扩大或者缩小-->
<!--    minmum-scale：最小缩放-->
<!--    maxmum-scale：最大缩放-->
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>微金所实例</title>
    <!-- 引入Bootstrap -->
    <link href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css"  rel="stylesheet" >
    <link href="./lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="./lib/jquery1.11.3.js"></script>

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--    条件注释的作用就是当判断条件满足时，就会执行注释中的html代码 不满足时会当作注释忽略掉-->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
<!--    让浏览器可以识别HTML5的新标签 respond让低版本的浏览器可以使用CSS3的媒体查询-->
<!--    自己写的css要放下面 外部引入的要放上面 避免覆盖-->
    <link rel="stylesheet" href="./css/main.css">
    <style>
        @media(max-width: 767px) { /*媒体查询当满足条件时执行*/
            .container{
                width:100%;
            }
        }
        @media(min-width: 768px) { /*媒体查询当满足条件时执行*/
            .container{
                width: 750px;
            }
        }
        @media(min-width: 992px) { /*媒体查询当满足条件时执行*/
            .container{
                width: 970px;
            }
        }
        @media(min-width: 1200px) { /*媒体查询当满足条件时执行*/
            .container{
                width: 1170px;
            }
        }
        /*
1.字体图标格式*/
        /*eot:embedded-opentype
          svg:svg
          ttf:truetype
          woff:woff
2.通配选择器
        [class^="icon-"],[class*=" icon-"]{
            font-family: itcast;
        }
3.加号选择器 去找满足条件的它后面所有的什么什么元素
4.media媒体查询 是css3高级功能  根据一个判断条件 决定一段css代码是否被执行 比如屏幕的宽度
5.字体文件格式
    eot:embedded-opentype
    svg:svg
    ttf:truetype
    woff:woff
6.carousel 轮播图
    在一个较小屏幕下展示一个超宽的图片 想让图片居中 两种方法
        5.1 背景图
        5.2 position: absolute
            left:50%
            margin-left:-width/2
7.backgound-size
    length 100px 100px
    percentage 90% 95% 百分比
    cover 背景图片的较小边放大到目标大小结束
    contain  背景图片的较大边放大到目标大小结束
8.图片响应式
    各种终端都需要正常显示图片
    移动端应该使用更小(体积)的图片
9.fade 淡入淡出的效果在class里加入
 active的那一项要写in                     fade in active
10.bootstrap里轮播图和选项卡 否则报错
11.data-spy="affix"  冻结哪一块
12.data-offset-top="60"  从上面哪里开始冻结
13.data-offset-bottom="200" 冻结消失
        */
    </style>
</head>
<body>

<!--section相互之间没有关系时用-->
<!--头部区域-->
<header id="header">
    <div class="topbar visible-md visible-lg"><!--topbar隐藏  hidden-sm 990px以下 hidden-xs768px以下 -->
        <!--也可以写topbar展示在 visible-md 990以上 visible-lg-->
        <div class="container">
            <div class="row">
                <div class="col-md-2 text-center">
                    <a href="#" class="mobile-link">
                        <span class="glyphicon glyphicon-phone">手机微金所</span>
                        <i class="glyphicon glyphicon-chevron-down"></i>
                        <img src="./img/c_06.jpg" width="100px" height="100px" alt="手机app二维码">
                    </a>
                </div>
                <div class="col-md-5 text-center icon-telephone">

                   400-89-4006(服务时间:9:00-21:00)
                </div>
                <div class="col-md-2 text-center">
                    <a href="#" class="question-link">常见问题</a>
                    <a href="#" class="question-link">财富登录</a>
                </div>
                <div class="col-md-3 text-center left-link">
                    <a href="#" class="btn btn-danger btn-register btn-sm " >免费注册</a>
                    <a href="#" class="btn btn-link btn-sm" data-toggle="modal" data-target="#login-form">登录</a>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar  navbar-itcast navbar-static-top" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
        <div class="container">
            <div class="navbar-header ">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">切换菜单</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">
                    <i class="glyphicon glyphicon-heart"></i>
                    <i class="glyphicon glyphicon-off"></i>
                </a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
               <li class="active"><a href="#">我要投资</a></li>
                <li><a href="#">我要借款</a></li>
                <li><a href="#">平台介绍</a></li>
                <li><a href="#">新手专区</a></li>
                <li><a href="#">最新动态</a></li>
                <li><a href="#">微论坛</a></li>
            </ul>
             <ul class="nav navbar-nav navbar-right hidden-sm">
                <li><a href="#">个人中心</a></li>
            </ul>
            </div>
        </div>
    </nav>
</header>
<!--/头部区域-->
<!--广告轮播-->
<section id="main_ad" class="carousel slide" data-ride="carousel">
        <!-- Indicators 下面的小点点 活动指示器 -->
        <ol class="carousel-indicators">
            <li data-target="#main_ad" data-slide-to="0" class="active"></li>
            <li data-target="#main_ad" data-slide-to="1"></li>
            <li data-target="#main_ad" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides 轮播的图片 -->
        <div class="carousel-inner" role="listbox">
            <div class="item active" data-img-lg="./img/slide_01_2000x410.jpg " data-img-xm="./img/slide_01_640x340.jpg">
                <div class="carousel-caption">
                   标题1
                </div>
            </div>
            <div class="item " data-img-lg="./img/slide_02_2000x410.jpg " data-img-xm="./img/slide_02_640x340.jpg">
                <div class="carousel-caption">
                    标题2
                </div>
            </div>
            <div class="item " data-img-lg="./img/slide_03_2000x410.jpg " data-img-xm="./img/slide_03_640x340.jpg">
                <div class="carousel-caption">
                    标题3
                </div>
            </div>
        </div>
        <!-- Controls控制按钮 左边控制按钮和右边控制按钮 -->
        <a class="left carousel-control" href="#main_ad" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#main_ad" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

</section>
<!--/广告轮播-->
<!--网站特色-->
<section id="tese">
    <div class="container">
        <div class="row hidden-xs">
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="glyphicon glyphicon-usd"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">支付交易保证</h4>
                            <p>银联支付全程保障资金安全</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="glyphicon glyphicon-usd"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">平台财产安全</h4>
                            <p>有PICC保驾护航</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="glyphicon glyphicon-usd"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">交易安全</h4>
                            <p>有中国人寿财险对借款人承保</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="glyphicon glyphicon-usd"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">安全保证</h4>
                            <p>独创八层安全保证</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="glyphicon glyphicon-usd"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">筛选优质资源</h4>
                            <p>对接上海资信征信系统</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-sm-6 col-md-4">
                <a href="#">
                    <div class="media">
                        <div class="media-left">
                            <i class="glyphicon glyphicon-usd"></i>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">联合信息发布</h4>
                            <p>通过路透社共同发布利率指数报告</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>
<!--/网站特色-->
<!--立即预约-->
<section id="ljyy">
    <div class="container">
        <p class="pull-left">
           <i class="glyphicon glyphicon-time"></i>
            现在有
            <span>458</span>人在排队，累计预约交易成功<span>7409</span>次，什么是预约投标？
            <a href="#" class="hidden-xs">立即预约</a>
        </p>
        <p class="pull-right hidden-xs">
            <i class="glyphicon glyphicon-camera"></i>
            <a href="#">>微金所企业宣传片</a>
        </p>
    </div>

</section>
<!--/立即预约-->
<!--产品推荐-->
<section id="products">
    <div class="container">
        <!-- Nav tabs -->
        <!--
            目的：给ul增加横向滚动条
            1.给ul增加一个容器 这个容器有横向滚动条
            2.动态设置UL的宽度,宽度根据li的大小决定 ulWidth=sum(li.width)
        -->
       <div class="ul-wrapper">
           <ul class="nav nav-tabs" role="tablist">
               <li role="presentation" class="active"><a href="#table_01" aria-controls="table_01" role="tab" data-toggle="tab">特别推荐</a></li>
               <li role="presentation"><a href="#table_02" aria-controls="table_02" role="tab" data-toggle="tab">微投资</a></li>
               <li role="presentation"><a href="#table_03" aria-controls="table_03" role="tab" data-toggle="tab">微小宝</a></li>
               <li role="presentation"><a href="#table_04" aria-controls="table_04" role="tab" data-toggle="tab">微消费</a></li>
               <li role="presentation"><a href="#table_05" aria-controls="table_05" role="tab" data-toggle="tab">微增利</a></li>
               <li role="presentation"><a href="#table_06" aria-controls="table_06" role="tab" data-toggle="tab">微金宝</a></li>
               <li role="presentation"><a href="#table_07" aria-controls="table_07" role="tab" data-toggle="tab">微转让</a></li>
               <li class="pull-right hidden-sm hidden-xs"><a href="#">更多</a></li>
           </ul>
       </div>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="table_01">
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <div class="panel panel-czbk active">
                            <div class="panel-heading">
                               <p><strong >8</strong><sub>%</sub></p>
                               <span>年利率</span>
                            </div>
                            <div class="panel-body">
                               <h4>新手体验标0008期</h4>
                                <div class="row">
                                    <div class="col-xs-6 text-left">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                    <div class="col-xs-6 text-right">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                    <div class="col-xs-6 text-left">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                    <div class="col-xs-6 text-right">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <div class="panel panel-czbk ">
                            <div class="panel-heading">
                                <p class="tooltips">
                                    <a class="badge badge-one" href="#" data-toggle="tooltip" data-placement="top" title="北京欢迎你">京</a>
                                    <a class="badge badge-two" href="#" data-toggle="tooltip" data-placement="top" title="上海欢迎你">沪</a>
                                </p>
                                <p><strong >8</strong><sub>%</sub></p>
                                <span>年利率</span>
                            </div>
                            <div class="panel-body">
                                <h4>新手体验标0008期</h4>
                                <div class="row">
                                    <div class="col-xs-6 text-left">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                    <div class="col-xs-6 text-right">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                    <div class="col-xs-6 text-left">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                    <div class="col-xs-6 text-right">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4">
                        <div class="panel panel-czbk disabled">
                            <div class="panel-heading">
                                <p><strong >8</strong><sub>%</sub></p>
                                <span>年利率</span>
                            </div>
                            <div class="panel-body">
                                <h4>新手体验标0008期</h4>
                                <div class="row">
                                    <div class="col-xs-6 text-left">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                    <div class="col-xs-6 text-right">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                    <div class="col-xs-6 text-left">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                    <div class="col-xs-6 text-right">
                                        <p>起始金额</p>
                                        <p><strong>1000.00</strong><sub>万</sub></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4"></div>
                    <div class="col-xs-12 col-sm-6 col-md-4"></div>
                    <div class="col-xs-12 col-sm-6 col-md-4"></div>
                </div>
             </div>
             <div role="tabpanel" class="tab-pane fade" id="table_02"></div>
             <div role="tabpanel" class="tab-pane fade" id="table_03"></div>
             <div role="tabpanel" class="tab-pane fade" id="table_04"></div>
             <div role="tabpanel" class="tab-pane fade" id="table_05"></div>
             <div role="tabpanel" class="tab-pane fade" id="table_06"></div>
             <div role="tabpanel" class="tab-pane fade" id="table_07"></div>
        </div>
    </div>
</section>
<!--/产品推荐-->
<!--新闻-->
<section id="news">
    <div class="container">
        <div class="row">
            <div class="col-sm-2 col-sm-offset-3">
                <div class="new-title">
                    新闻资讯
                </div>
            </div>
            <div class="col-sm-1">
                <ul class="nav nav-pills ">
                    <li role="presentation" class="active"><a data-title="全部新闻" href="#news01"  role="tab" data-toggle="tab"><i class="glyphicon glyphicon-record home"></i></a></li>
                    <li role="presentation"><a data-title="媒体新闻" href="#news02" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-record home"></i></a></li>
                    <li role="presentation"><a data-title="行业资讯" href="#news03"  role="tab" data-toggle="tab"><i class="glyphicon glyphicon-record home"></i></a></li>
                    <li role="presentation"><a data-title="公司荣誉" href="#news04" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-record home"></i></a></li>
                </ul>
            </div>
            <div class="col-sm-6">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active" id="news01">
                        <ul>
                            <li>微金所来了，发金币了！！！！！！！！！！！</li>
                            <li>微金所来了，发金币了！！！！！！！！！！！</li>
                            <li>微金所来了，发金币了！！！！！！！！！！！</li>
                            <li>微金所来了，发金币了！！！！！！！！！！！</li>
                            <li>微金所来了，发金币了！！！！！！！！！！！</li>
                            <li>微金所来了，发金币了！！！！！！！！！！！</li>
                            <li>微金所来了，发金币了！！！！！！！！！！！</li>
                            <li>微金所来了，发金币了！！！！！！！！！！！</li>
                            <li>微金所来了，发金币了！！！！！！！！！！！</li>
                            <li>微金所来了，发金币了！！！！！！！！！！！</li>
                        </ul>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="news02">
                        <ul>
                            <li>微金所来了，发钻石了！！！！！！！！！！！</li>
                            <li>微金所来了，发钻石了！！！！！！！！！！！</li>
                            <li>微金所来了，发钻石了！！！！！！！！！！！</li>
                            <li>微金所来了，发钻石了！！！！！！！！！！！</li>
                            <li>微金所来了，发钻石了！！！！！！！！！！！</li>
                            <li>微金所来了，发钻石了！！！！！！！！！！！</li>
                            <li>微金所来了，发钻石了！！！！！！！！！！！</li>
                            <li>微金所来了，发钻石了！！！！！！！！！！！</li>
                            <li>微金所来了，发钻石了！！！！！！！！！！！</li>
                            <li>微金所来了，发钻石了！！！！！！！！！！！</li>
                        </ul>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="news03">
                        <ul>
                            <li>微金所来了，发金刚石了！！！！！！！！！！</li>
                            <li>微金所来了，发金刚石了！！！！！！！！！！</li>
                            <li>微金所来了，发金刚石了！！！！！！！！！！</li>
                            <li>微金所来了，发金刚石了！！！！！！！！！！</li>
                            <li>微金所来了，发金刚石了！！！！！！！！！！</li>
                            <li>微金所来了，发金刚石了！！！！！！！！！！</li>
                            <li>微金所来了，发金刚石了！！！！！！！！！！</li>
                            <li>微金所来了，发金刚石了！！！！！！！！！！</li>
                            <li>微金所来了，发金刚石了！！！！！！！！！！</li>
                            <li>微金所来了，发金刚石了！！！！！！！！！！</li>
                        </ul>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="news04">
                        <ul>
                            <li>微金所来了，发黄金了！！！！！！！！！！！</li>
                            <li>微金所来了，发黄金了！！！！！！！！！！！</li>
                            <li>微金所来了，发黄金了！！！！！！！！！！！</li>
                            <li>微金所来了，发黄金了！！！！！！！！！！！</li>
                            <li>微金所来了，发黄金了！！！！！！！！！！！</li>
                            <li>微金所来了，发黄金了！！！！！！！！！！！</li>
                            <li>微金所来了，发黄金了！！！！！！！！！！！</li>
                            <li>微金所来了，发黄金了！！！！！！！！！！！</li>
                            <li>微金所来了，发黄金了！！！！！！！！！！！</li>
                            <li>微金所来了，发黄金了！！！！！！！！！！！</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--/新闻-->
<!--合作伙伴-->
<section id="hzhb" class="hidden-sm hidden-xs">
    <div class="container text-center">
    <h3>合作伙伴</h3>
    <ul>
        <li>
            <a class="icon-uniE930" href="http://www.chinapay.com/" target="_blank"></a>
        </li>
        <li>
            <a class="icon-uniE92F" href="http://www.chinapay.com/" target="_blank"></a>
        </li>
        <li>
            <a class="icon-uniE92E" href="http://www.chinapay.com/" target="_blank"></a>
        </li>
        <li>
            <a class="icon-uniE92A" href="http://www.chinapay.com/" target="_blank"></a>
        </li>
        <li>
            <a class="icon-uniE929" href="http://www.chinapay.com/" target="_blank"></a>
        </li>
        <li>
            <a class="icon-uniE931" href="http://www.chinapay.com/" target="_blank"></a>
        </li>
        <li>
            <a class="icon-uniE92C" href="http://www.chinapay.com/" target="_blank"></a>
        </li>
        <li>
            <a class="icon-uniE92B" href="http://www.chinapay.com/" target="_blank"></a>
        </li>
        <li>
            <a class="icon-uniE92D" href="http://www.chinapay.com/" target="_blank"></a>
        </li>
    </ul>
</div>
</section>
<!--/合作伙伴-->
<!--脚注区域-->
<footer id="footer"></footer>
<!--/脚注区域-->
<!--模态框-->
<!-- Modal -->
<div class="modal fade" id="login-form" tabindex="-1" role="dialog" aria-labelledby="login-form-title">
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="login-form-title"><a href="#">密码登录</a></h4>
            </div>
            <div class="modal-body"><!--模态框的正文内容-->
                    <div class="input-group">
                        <span class="input-group-addon glyphicon glyphicon-user" id="userinput"></span>
                        <input type="text" class="form-control" placeholder="会员名/邮箱/手机号" aria-describedby="basic-addon1">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon glyphicon glyphicon-lock" id="pswinput"></span>
                        <input type="text" class="form-control" placeholder="请输入登录密码" aria-describedby="basic-addon1">
                    </div>
            </div>
            <div class="modal-footer">
                <ul class="save-ylogin">
                    <li><a href="#">忘记密码</a></li>
                    <li><a href="#">忘记用户名</a></li>
                    <li><a href="#">免费注册</a></li>
               </ul>
        </div>
            <button class="btn-login"><a href="#">登录</a></button>
    </div>
</div>
</div>
<!--脚本放在最底下-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="./lib/jquery1.11.3.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--自己写的JS文件-->
<script src="./js/main.js"></script>

</body>
</html>